<template>
    <div class="min-h-screen relative overflow-hidden">
        <ParticleBackground color="#4F46E5" :particleCount="150" :speed="0.5" :lineOpacity="0.5" class="particle-bg" />
        <!-- 背景光效 -->
        <div class="tech-bg-effects">
            <div class="tech-circle"></div>
            <div class="tech-circle circle-2"></div>
            <div class="tech-grid"></div>
        </div>
        <!-- Header -->
        <header class="bg-gradient-to-r from-indigo-900/80 to-indigo-800/80 shadow-lg backdrop-blur-sm">
            <div class="container mx-auto px-4 py-4">
                <h1 class="text-2xl font-bold text-center text-indigo-200 glow-text">九型人格测试</h1>
            </div>
        </header>

        <!-- Main Content -->
        <main class="container mx-auto px-4 py-8">
            <router-view></router-view>
        </main>

        <!-- Footer -->
        <footer class="bg-gradient-to-r from-indigo-900/80 to-indigo-800/80 border-t border-indigo-500/30 mt-8 backdrop-blur-sm">
            <div class="container mx-auto px-4 py-6 text-center text-indigo-200/70 text-sm">
                <p>© 2025 九型人格测试系统. 所有权利保留.</p>
            </div>
        </footer>
    </div>
</template>

<script lang="ts" setup>
import ParticleBackground from '/@/components/ParticleBackground.vue'
</script>
<style>
@import '/@/assets/css/enneagram.css';
</style>
